<template>
  <div>
    <el-form
      :inline="true"
      :model="addInfo"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-form-inline"
    >
        <el-form-item label="标签添加">
          <template slot-scope="scope">
            <span style="color: red;margin-left: 5px">*</span>
            <el-input
              v-model="addInfo.tagName"
              placeholder="标签名称"
              style="height: 30px;width: 120px;margin-left: 10px"
            ></el-input>
            <el-input
              v-model="addInfo.tagDescription"
              placeholder="标签描述信息"
              style="height: 30px;width: 200px;margin-left: 20px"
            ></el-input>
            <el-button
              type="primary"
              @click="addAppTag"
              class="el-button-primary-style"
              style="margin-left: 20px"
            >添加
            </el-button>
          </template>
        </el-form-item>
      </el-form>
    <div>
      <el-table
        :data="appTagList"
        style="width: 100%"
        height=250
        border
        stripe
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
      >
        <el-table-column label="标签名称" prop="tagName"></el-table-column>
        <el-table-column label="标签描述" prop="tagDescription"></el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="deleteTag(scope.row)"
              style="color: #f56c6c"
            >删除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import { warnIfGridRowColumnExists } from 'autoprefixer/lib/hacks/grid-utils'

export default {
  name: "AddAppTagDialog",
  data() {
    return {
      addInfo: {
        tagName: "",
        tagDescription: "",
      },
      appTagList: [],
      rules: {
        tagName: [
          {
            max: 5,
            required: true,
            message: "请填写标签名称,长度小于5",
            trigger: ["blur", "change"],
          },
        ],
        tagDescription: [
          {
            min: 1,
            max: 1024,
            message: "长度在 1 到 1024 之间",
            trigger: "blur",
          },
        ],
      },
    };
  },
  beforeMount() {
    this.getAppTagList();
  },
  methods: {
    //获取所有标签列表
    getAppTagList() {
      this.$appStoreApi
        .listAppTag()
        .then((res) => {
          if (res && res.code === 200) {
            this.appTagList = res.data;
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    //添加标签
    addAppTag() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$appStoreApi.addAppTag(this.addInfo).then((res) => {
            if (res && res.code === 200) {
              this.$message.success(res.data);
              this.resetForm();
              this.getAppTagList();
            }
          });
        } else {
          this.$message.warning("数据存在问题，请检查");
          return false;
        }
      });
    },
    //重置表单
    resetForm() {
      this.$refs.ruleForm.resetFields();
      this.addInfo = {
        tagName: "",
          tagDescription: "",
      }
    },
    //删除标签
    deleteTag(row) {
      this.$alert("确认删除此标签", "删除标签", {
        confirmButtonText: "确定",
        type: "warning",
        callback: (action) => {
          if (action === "confirm") {
            this.$appStoreApi
              .deleteAppTag(row.id)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$message.success(res.data);
                  this.getAppTagList();
                }
              })
              .catch((error) => {
                this.$message.error(error.message);
              });
          }
        },
      });
    }
  },
};
</script>

<style lang="css" scoped>
/**::v-deep .el-input--suffix .el-input__inner {
    padding-right: 0;
    height: 32px;
  }*/

::v-deep .el-checkbox .el-checkbox__inner {
  border-radius: 50%;
}
</style>
